<script setup>
import { ref, onMounted } from 'vue'
import { listPlantData } from '@/api/data.js'
const option = ref({})
onMounted(async () => {
  function getData() {
    listPlantData(5).then((res) => {
      const data = JSON.parse(res.rows[0].data)
      const time = data.map((item) => item.time)
      const value1 = data.map((item) => item.value1)
      const value2 = data.map((item) => item.value2)
      const value3 = data.map((item) => item.value3)
      const value4 = data.map((item) => item.value4)
      const value5 = data.map((item) => item.value5)
      const value6 = data.map((item) => item.value6)
      option.value = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params, ticket, callback) {
            var res = ''
            for (var i = 0, l = params.length; i < l; i++) {
              res += '' + params[i].seriesName + ' : ' + params[i].value + '<br>'
            }
            return res
          },
          backgroundColor: '#0A1326',
          borderColor: '#535b69',
          borderRadius: 8,
          borderWidth: 2,
          padding: [5, 10],
          textStyle: {
            color: '#fff',
          },
        },
        legend: {
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 10,
          data: ['螟蛾', '蚊子', '裳夜蛾', '小灰蛾', '尺蛾', '蜂'],
          textStyle: {
            fontSize: 14,
            color: '#DADBDE',
          },
        },
        grid: {
          top: 30,
          right: 20,
          bottom: 70,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true, //坐标轴两边是否留白
            axisLine: {
              //坐标轴线
              show: true,
              lineStyle: {
                color: '#515151',
              },
            },
            axisTick: {
              //坐标轴刻度线
              show: false,
            },
            axisLabel: {
              rotate: 10,
              margin: 0,
              color: '#D9D9D9',
            },
            data: time,
            offset: 10,
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              //坐标轴线
              show: false,
              lineStyle: {
                color: '#fff',
              },
            },
            lineStyle: {
              type: 'dashed',
            },
            splitLine: {
              //坐标轴分割线
              lineStyle: {
                type: 'dashed',
                color: '#2b3646',
              },
            },
          },
        ],
        series: [
          {
            name: '螟蛾',
            type: 'line',
            showSymbol: true,
            symbolSize: 8,
            data: value1,
          },
          {
            name: '蚊子',
            type: 'line',
            showSymbol: true,
            symbolSize: 8,
            data: value2,
          },
          {
            name: '裳夜蛾',
            type: 'line',
            showSymbol: true,
            symbolSize: 8,
            data: value3,
          },
          {
            name: '小灰蛾',
            type: 'line',
            showSymbol: true,
            symbolSize: 8,
            data: value4,
          },
          {
            name: '尺蛾',
            type: 'line',
          },
          {
            name: '蜂',
            type: 'line',
            showSymbol: true,
            symbolSize: 8,
            data: value6,
          },
        ],
      }
    })
  }
  getData()
  setInterval(getData, import.meta.env.VITE_APP_INTERVAL)
})
</script>
<template>
  <div class="index-3">
    <div class="flex">
      <div class="left">
        <svg
          style="margin-top: -10px"
          width="400"
          height="40"
          viewBox="0 0 463 44"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g filter="url(#filter0_i_193_13531)">
            <circle cx="20.2461" cy="22" r="8" fill="url(#paint0_radial_193_13531)" />
          </g>
          <circle
            cx="20.2461"
            cy="22"
            r="7.75"
            stroke="url(#paint1_linear_193_13531)"
            stroke-width="0.5"
          />
          <circle
            cx="20.2461"
            cy="22"
            r="7.75"
            stroke="url(#paint2_radial_193_13531)"
            stroke-width="0.5"
          />
          <g filter="url(#filter1_d_193_13531)">
            <g filter="url(#filter2_d_193_13531)">
              <path
                d="M25.3071 22.0005L19.1577 27.0171L20.4419 22.0005L19.1577 16.9829L25.3071 22.0005ZM18.6714 20.9966V23.0034H16.7261V20.9966H18.6714Z"
                fill="url(#paint3_linear_193_13531)"
              />
            </g>
          </g>
          <path
            d="M12.4854 21.27L13.1807 22.0127L12.4608 22.7301L11.7655 21.9874L12.4854 21.27Z"
            fill="white"
          />
          <g filter="url(#filter3_d_193_13531)">
            <path
              d="M35.826 16.22H48.202V17.508H41.706C41.272 18.754 40.712 19.916 40.04 20.98H47.194V28.288H45.836V27.616H40.32V28.288H38.948V22.492C38.164 23.444 37.268 24.312 36.288 25.082L35.462 23.752C37.674 22.128 39.27 20.042 40.264 17.508H35.826V16.22ZM40.32 26.328H45.836V22.268H40.32V26.328ZM54.166 24.522H49.952V23.318H55.37V22.086H56.686V23.318H62.09V24.522H57.904C58.898 25.614 60.424 26.482 62.468 27.126L61.838 28.428C59.458 27.434 57.764 26.132 56.742 24.522H56.686V28.442H55.37V24.522H55.3C54.418 26.02 52.766 27.322 50.344 28.428L49.574 27.168C51.772 26.384 53.298 25.502 54.166 24.522ZM54.572 17.662L55.552 18.082C55.202 18.852 54.796 19.51 54.348 20.07L53.368 19.524C53.886 18.908 54.292 18.292 54.572 17.662ZM61.446 17.998C61.838 18.894 62.202 19.916 62.51 21.064L61.502 21.302C61.222 20.294 60.872 19.314 60.452 18.376C60.396 19.832 60.34 20.728 60.284 21.05C60.186 21.512 59.99 21.834 59.71 22.016C59.402 22.184 58.744 22.268 57.722 22.268H57.442L57.092 21.106C57.428 21.134 57.75 21.148 58.072 21.148C58.52 21.148 58.8 21.078 58.926 20.938C59.038 20.798 59.122 20.588 59.15 20.28C59.178 19.944 59.206 18.908 59.248 17.172H57.918C57.624 18.446 57.218 19.468 56.7 20.238C56.056 21.106 55.118 21.89 53.858 22.576L53.06 21.554C54.194 20.98 55.062 20.35 55.65 19.65C56.126 19.02 56.504 18.194 56.756 17.172H54.082V16.024H60.522C60.494 16.892 60.48 17.662 60.452 18.306L61.446 17.998ZM52.416 19.79L53.298 20.546C52.542 21.414 51.604 22.156 50.498 22.8L49.714 21.764C50.778 21.204 51.688 20.546 52.416 19.79ZM51.128 15.604C52.01 15.94 52.822 16.374 53.55 16.878L52.906 17.858C52.122 17.284 51.324 16.836 50.498 16.528L51.128 15.604ZM50.442 17.676C51.198 17.97 51.898 18.334 52.528 18.754L51.898 19.734C51.212 19.272 50.512 18.908 49.798 18.656L50.442 17.676ZM68.894 16.416H71.862V15.52H73.164V16.416H76.048V17.564H73.164V18.376H75.474V24.718H76.412V25.894H73.92C74.83 26.328 75.656 26.846 76.412 27.448L75.726 28.498C74.844 27.7 73.934 27.07 73.01 26.622L73.5 25.894H71.008L71.834 26.608C71.036 27.336 70.056 27.98 68.894 28.526L68.11 27.532C69.23 27.056 70.154 26.51 70.896 25.894H68.558V24.718H69.524V18.376H71.862V17.564H68.894V16.416ZM70.812 24.718H74.172V23.99H70.812V24.718ZM70.812 23.122H74.172V22.45H70.812V23.122ZM70.812 21.582H74.172V20.938H70.812V21.582ZM70.812 20.056H74.172V19.384H70.812V20.056ZM65.17 15.548L66.444 15.814C66.346 16.22 66.248 16.612 66.136 16.99H68.376V18.264H65.716C65.506 18.824 65.282 19.342 65.03 19.832H68.166V21.022H66.892V22.45H68.6V23.682H66.892V26.524C67.326 26.342 67.76 26.118 68.208 25.866L68.432 26.972C67.634 27.406 66.71 27.77 65.674 28.05L65.184 27.042C65.464 26.93 65.604 26.776 65.604 26.552V23.682H63.896V22.45H65.604V21.022H64.932V20.028L64.512 20.784L63.42 20.098C64.232 18.698 64.82 17.172 65.17 15.548ZM79.632 17.606C79.338 18.026 79.03 18.376 78.708 18.67H80.724C80.78 18.32 80.822 17.97 80.85 17.606H79.632ZM80.36 19.888H77.756V18.67H78.386L77.728 17.844C78.372 17.27 78.946 16.458 79.422 15.394L80.612 15.646C80.514 15.926 80.402 16.178 80.29 16.43H84.126V17.606H82.124C82.096 17.984 82.068 18.334 82.012 18.67H84.518V19.888H81.732C81.704 19.958 81.69 20.028 81.676 20.084C82.712 20.616 83.58 21.148 84.308 21.68L83.482 22.52H88.83V28.47H87.486V27.924H80.878V28.47H79.548V22.716C79.184 22.94 78.806 23.164 78.386 23.36L77.49 22.282C78.946 21.638 79.884 20.868 80.332 19.944L80.36 19.888ZM80.878 26.748H87.486V25.824H80.878V26.748ZM80.878 24.676H87.486V23.696H80.878V24.676ZM79.828 22.52H83.244C82.712 22.044 82.054 21.554 81.242 21.05C80.906 21.582 80.43 22.072 79.828 22.52ZM84.952 16.444H89.852V21.736H84.952V16.444ZM88.55 20.574V17.62H86.254V20.574H88.55ZM102.83 24.9H98.21C98.756 25.362 99.19 25.768 99.498 26.118L98.588 26.762C98.224 26.328 97.748 25.852 97.146 25.334L97.846 24.9H92.834V23.948H101.542V23.318H93.45V22.422H101.542V21.806H93.002V20.854H94.528V20.224H92.134V19.3H94.528V18.698H92.652V17.774H94.528V17.186H92.386V16.262H94.528V15.59H95.83V16.262H97.734V17.186H95.83V17.774H97.538V18.698H95.83V19.3H97.734V20.224H95.83V20.854H100.254V20.224H98.168V19.3H100.254V18.698H98.462V17.774H100.254V17.186H98.238V16.262H100.254V15.59H101.542V16.262H103.67V17.186H101.542V17.774H103.376V18.698H101.542V19.3H103.866V20.224H101.542V20.854H102.83V24.9ZM92.904 25.39L94.066 25.642C93.758 26.636 93.352 27.49 92.834 28.218L91.784 27.546C92.302 26.874 92.68 26.16 92.904 25.39ZM99.96 28.19H96.194C95.27 28.19 94.822 27.77 94.822 26.958V25.348H96.096V26.678C96.096 26.93 96.236 27.056 96.544 27.056H99.708C99.946 27.056 100.114 27 100.212 26.902C100.352 26.762 100.436 26.384 100.492 25.74L101.696 26.132C101.584 27.126 101.402 27.728 101.136 27.924C100.87 28.092 100.478 28.19 99.96 28.19ZM102.746 25.152C103.516 25.978 104.118 26.706 104.538 27.322L103.558 27.994C103.124 27.322 102.536 26.566 101.794 25.74L102.746 25.152ZM105.924 16.528H108.836V15.534H110.138V16.528H113.876V15.534H115.178V16.528H118.09V17.732H115.178V18.838H113.876V17.732H110.138V18.838H108.836V17.732H105.924V16.528ZM111.468 18.39H112.532C113.68 19.706 115.668 20.854 118.482 21.848L117.754 22.982C115.178 22.058 113.26 20.896 112 19.51C110.488 21.022 108.57 22.17 106.26 22.982L105.532 21.862C108.108 20.98 110.082 19.818 111.468 18.39ZM107.786 22.674H111.342V21.162H112.658V22.674H116.13V23.948H112.658V27.014C112.658 27.938 112.21 28.4 111.342 28.4H109.942L109.662 27.196C110.096 27.252 110.516 27.28 110.908 27.28C111.188 27.28 111.342 27.084 111.342 26.706V23.948H107.786V22.674ZM109.508 24.424L110.334 25.362C109.298 26.314 108.052 27.112 106.568 27.728L105.994 26.51C107.422 25.978 108.598 25.292 109.508 24.424ZM114.31 24.424C115.64 25.068 116.858 25.866 117.95 26.804L117.208 27.952C116.046 26.874 114.856 26.034 113.638 25.432L114.31 24.424ZM131.866 16.052V28.442H130.536V27.938H121.464V28.442H120.134V16.052H131.866ZM121.464 26.762H130.536V17.256H121.464V26.762ZM123.018 18.278H128.996V19.454H123.018V18.278ZM122.22 20.672H129.78V21.848H127.652V24.438C127.652 24.718 127.764 24.858 128.016 24.858H128.394C128.562 24.858 128.688 24.816 128.8 24.732C128.94 24.662 129.024 24.228 129.08 23.43L130.172 23.794C130.046 24.858 129.892 25.474 129.696 25.67C129.5 25.838 129.15 25.922 128.646 25.936H127.624C127.232 25.936 126.952 25.824 126.756 25.6C126.532 25.362 126.434 25.068 126.434 24.718V21.848H125.37C125.23 22.94 124.964 23.808 124.558 24.424C124.082 25.152 123.34 25.74 122.346 26.16L121.73 25.096C122.542 24.774 123.158 24.312 123.55 23.724C123.858 23.248 124.068 22.632 124.18 21.848H122.22V20.672ZM135.016 17.662H139.328V15.548H140.672V17.662H144.956V23.136H140.672V26.104C141.96 25.978 143.122 25.838 144.13 25.684C143.864 25.096 143.598 24.55 143.332 24.046L144.508 23.57C145.236 24.9 145.852 26.314 146.37 27.798L145.138 28.316C144.97 27.812 144.788 27.336 144.62 26.888C142.38 27.28 138.908 27.616 134.19 27.91L133.966 26.496C135.94 26.426 137.732 26.328 139.328 26.216V23.136H135.016V17.662ZM143.668 21.89V18.908H140.672V21.89H143.668ZM139.328 21.89V18.908H136.304V21.89H139.328ZM154.168 24.48V25.222H158.312V24.48H154.168ZM158.312 23.472V22.674H154.168V23.472H158.312ZM154.168 26.23V28.414H152.922V21.596H159.572V27.056C159.572 27.91 159.124 28.344 158.228 28.344H157.178L156.856 27.182L157.85 27.252C158.158 27.252 158.312 27.084 158.312 26.776V26.23H154.168ZM155.61 15.52H156.926V16.332H160.062V17.41H156.926V18.124H159.586V19.188H156.926V19.874H160.468V20.966H152.012V20.56L151.298 20.728C151.088 19.888 150.836 19.104 150.542 18.362V28.386H149.254V15.562H150.542V18.208L151.41 17.914C151.662 18.502 151.9 19.146 152.11 19.874H155.61V19.188H152.908V18.124H155.61V17.41H152.432V16.332H155.61V15.52ZM147.868 18.264L148.876 18.334C148.848 19.734 148.694 21.064 148.414 22.324L147.42 22.044C147.686 20.84 147.84 19.58 147.868 18.264ZM169.582 18.39C169.134 19.482 168.574 20.392 167.888 21.12L167.048 20.084C168 18.922 168.644 17.368 168.98 15.422L170.352 15.674C170.254 16.178 170.142 16.64 170.03 17.088H174.006V18.39H169.582ZM171.08 19.104C171.808 20.028 172.354 20.826 172.746 21.512L171.64 22.268C171.234 21.512 170.688 20.686 170.002 19.776L171.08 19.104ZM165.354 15.492H166.684V22.464H165.354V15.492ZM162.47 16.178H163.786V21.946H162.47V16.178ZM172.956 22.982V26.846H174.356V28.036H161.602V26.846H163.072V22.982H172.956ZM164.36 26.846H165.9V24.186H164.36V26.846ZM167.188 26.846H168.784V24.186H167.188V26.846ZM170.072 26.846H171.668V24.186H170.072V26.846ZM176.638 15.744C177.408 16.374 178.052 17.004 178.584 17.634L177.702 18.516C177.24 17.928 176.582 17.284 175.728 16.612L176.638 15.744ZM176.414 19.174C177.156 19.86 177.786 20.532 178.304 21.204L177.436 22.086C176.974 21.442 176.33 20.77 175.504 20.042L176.414 19.174ZM177.366 23.01L178.486 23.444C177.982 25.152 177.408 26.762 176.778 28.274L175.574 27.756C176.26 26.216 176.862 24.634 177.366 23.01ZM183.876 16.178V24.83H182.7V17.312H180.082V24.914H178.906V16.178H183.876ZM182.378 25.404C183.19 26.132 183.862 26.846 184.422 27.574L183.54 28.442C183.078 27.742 182.42 26.986 181.58 26.174L182.378 25.404ZM180.852 18.124H181.944V22.52C181.902 24.13 181.65 25.418 181.174 26.384C180.712 27.28 179.956 27.966 178.92 28.47L178.234 27.364C179.228 26.888 179.9 26.286 180.264 25.558C180.614 24.774 180.81 23.766 180.852 22.52V18.124ZM186.746 28.33H185.206L184.926 27.098C185.402 27.154 185.864 27.182 186.312 27.182C186.592 27.182 186.746 27 186.746 26.664V15.604H187.992V26.972C187.992 27.868 187.572 28.33 186.746 28.33ZM184.702 16.752H185.864V25.404H184.702V16.752Z"
              fill="white"
            />
          </g>
          <line x1="11" y1="35.5" x2="442" y2="35.5" stroke="url(#paint4_linear_193_13531)" />
          <line
            x1="444"
            y1="35.5"
            x2="449"
            y2="35.5"
            stroke="url(#paint5_linear_193_13531)"
            stroke-opacity="0.6"
          />
          <line
            x1="451"
            y1="35.5"
            x2="456"
            y2="35.5"
            stroke="url(#paint6_linear_193_13531)"
            stroke-opacity="0.8"
          />
          <line x1="458" y1="35.5" x2="463" y2="35.5" stroke="url(#paint7_linear_193_13531)" />
          <defs>
            <filter
              id="filter0_i_193_13531"
              x="12.2461"
              y="14"
              width="16"
              height="20"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood flood-opacity="0" result="BackgroundImageFix" />
              <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
              <feColorMatrix
                in="SourceAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                result="hardAlpha"
              />
              <feOffset dy="4" />
              <feGaussianBlur stdDeviation="2" />
              <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
              <feColorMatrix
                type="matrix"
                values="0 0 0 0 0.0369444 0 0 0 0 0.321635 0 0 0 0 0.466667 0 0 0 1 0"
              />
              <feBlend mode="normal" in2="shape" result="effect1_innerShadow_193_13531" />
            </filter>
            <filter
              id="filter1_d_193_13531"
              x="0.726074"
              y="0.98291"
              width="40.5811"
              height="42.0342"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood flood-opacity="0" result="BackgroundImageFix" />
              <feColorMatrix
                in="SourceAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                result="hardAlpha"
              />
              <feOffset />
              <feGaussianBlur stdDeviation="8" />
              <feComposite in2="hardAlpha" operator="out" />
              <feColorMatrix
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0.87451 0 0 0 0 0.992157 0 0 0 1 0"
              />
              <feBlend
                mode="normal"
                in2="BackgroundImageFix"
                result="effect1_dropShadow_193_13531"
              />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="effect1_dropShadow_193_13531"
                result="shape"
              />
            </filter>
            <filter
              id="filter2_d_193_13531"
              x="12.7261"
              y="12.9829"
              width="16.5811"
              height="18.0342"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood flood-opacity="0" result="BackgroundImageFix" />
              <feColorMatrix
                in="SourceAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                result="hardAlpha"
              />
              <feOffset />
              <feGaussianBlur stdDeviation="2" />
              <feComposite in2="hardAlpha" operator="out" />
              <feColorMatrix
                type="matrix"
                values="0 0 0 0 0.379167 0 0 0 0 0.925126 0 0 0 0 1 0 0 0 0.53 0"
              />
              <feBlend
                mode="normal"
                in2="BackgroundImageFix"
                result="effect1_dropShadow_193_13531"
              />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="effect1_dropShadow_193_13531"
                result="shape"
              />
            </filter>
            <filter
              id="filter3_d_193_13531"
              x="25.4619"
              y="6.39404"
              width="172.53"
              height="33.1318"
              filterUnits="userSpaceOnUse"
              color-interpolation-filters="sRGB"
            >
              <feFlood flood-opacity="0" result="BackgroundImageFix" />
              <feColorMatrix
                in="SourceAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                result="hardAlpha"
              />
              <feOffset dy="1" />
              <feGaussianBlur stdDeviation="5" />
              <feComposite in2="hardAlpha" operator="out" />
              <feColorMatrix
                type="matrix"
                values="0 0 0 0 0.106875 0 0 0 0 0.494713 0 0 0 0 0.95 0 0 0 1 0"
              />
              <feBlend
                mode="normal"
                in2="BackgroundImageFix"
                result="effect1_dropShadow_193_13531"
              />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="effect1_dropShadow_193_13531"
                result="shape"
              />
            </filter>
            <radialGradient
              id="paint0_radial_193_13531"
              cx="0"
              cy="0"
              r="1"
              gradientUnits="userSpaceOnUse"
              gradientTransform="translate(20.2461 22) rotate(90) scale(8)"
            >
              <stop stop-color="#254E60" stop-opacity="0" />
              <stop offset="0.697054" stop-color="#254E60" stop-opacity="0.541667" />
              <stop offset="1" stop-color="#254E60" />
            </radialGradient>
            <linearGradient
              id="paint1_linear_193_13531"
              x1="16.6558"
              y1="15.7039"
              x2="20.2461"
              y2="30"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#44DDFF" stop-opacity="0" />
              <stop offset="1" stop-color="#D1FDFF" stop-opacity="0.56" />
            </linearGradient>
            <radialGradient
              id="paint2_radial_193_13531"
              cx="0"
              cy="0"
              r="1"
              gradientUnits="userSpaceOnUse"
              gradientTransform="translate(28.2461 3.48941) rotate(129.931) scale(24.9276 43.5386)"
            >
              <stop stop-color="white" stop-opacity="0" />
              <stop offset="0.902004" stop-color="#D7FAFF" stop-opacity="0" />
              <stop offset="0.955388" stop-color="white" stop-opacity="0" />
              <stop offset="1" stop-color="#D2FDFF" />
            </radialGradient>
            <linearGradient
              id="paint3_linear_193_13531"
              x1="18.8713"
              y1="16.9829"
              x2="20.7698"
              y2="25.3466"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="white" />
              <stop offset="1" stop-color="#00DFFD" />
            </linearGradient>
            <linearGradient
              id="paint4_linear_193_13531"
              x1="15.5929"
              y1="36"
              x2="451.381"
              y2="36.0018"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#8EA0AC" />
              <stop offset="0.0208333" stop-color="#9CACB6" stop-opacity="0.28" />
              <stop offset="0.0833333" stop-color="#313D4B" stop-opacity="0.38" />
              <stop offset="0.927083" stop-color="#13C6FF" stop-opacity="0.16" />
              <stop offset="1" stop-color="#13C6FF" />
            </linearGradient>
            <linearGradient
              id="paint5_linear_193_13531"
              x1="444.053"
              y1="36"
              x2="449.109"
              y2="36"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#8EA0AC" />
              <stop offset="1" stop-color="white" />
            </linearGradient>
            <linearGradient
              id="paint6_linear_193_13531"
              x1="451.053"
              y1="36"
              x2="456.109"
              y2="36"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#8EA0AC" />
              <stop offset="1" stop-color="white" />
            </linearGradient>
            <linearGradient
              id="paint7_linear_193_13531"
              x1="458.053"
              y1="36"
              x2="463.109"
              y2="36"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#8EA0AC" />
              <stop offset="1" stop-color="white" />
            </linearGradient>
          </defs>
        </svg>
        <Echarts :option="option" />
      </div>
      <div class="right">
        <div class="col">
          <div class="item">
            <div class="title">诱虫灯</div>
            <div class="status">
              <div class="close"></div>
              <div class="value">关闭</div>
            </div>
          </div>
          <div class="item">
            <div class="title">虫雨挡板</div>
            <div class="status">
              <div class="open">
                <svg
                  width="26"
                  height="26"
                  viewBox="0 0 26 26"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g filter="url(#filter0_d_209_14064)">
                    <circle cx="13" cy="13" r="3" fill="#00FF66" />
                  </g>
                  <defs>
                    <filter
                      id="filter0_d_209_14064"
                      x="0"
                      y="0"
                      width="26"
                      height="26"
                      filterUnits="userSpaceOnUse"
                      color-interpolation-filters="sRGB"
                    >
                      <feFlood flood-opacity="0" result="BackgroundImageFix" />
                      <feColorMatrix
                        in="SourceAlpha"
                        type="matrix"
                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                        result="hardAlpha"
                      />
                      <feMorphology
                        radius="2"
                        operator="dilate"
                        in="SourceAlpha"
                        result="effect1_dropShadow_209_14064"
                      />
                      <feOffset />
                      <feGaussianBlur stdDeviation="4" />
                      <feComposite in2="hardAlpha" operator="out" />
                      <feColorMatrix
                        type="matrix"
                        values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.4 0 0 0 0.5 0"
                      />
                      <feBlend
                        mode="normal"
                        in2="BackgroundImageFix"
                        result="effect1_dropShadow_209_14064"
                      />
                      <feBlend
                        mode="normal"
                        in="SourceGraphic"
                        in2="effect1_dropShadow_209_14064"
                        result="shape"
                      />
                    </filter>
                  </defs>
                </svg>
              </div>
              <div class="value">开启</div>
            </div>
          </div>
          <div class="item">
            <div class="title">杀虫挡板</div>
            <div class="status">
              <div class="close"></div>
              <div class="value">关闭</div>
            </div>
          </div>
          <div class="item">
            <div class="title">烘干挡板</div>
            <div class="status">
              <div class="close"></div>
              <div class="value">关闭</div>
            </div>
          </div>
          <div class="item">
            <div class="title">移虫装置</div>
            <div class="status">
              <div class="close"></div>
              <div class="value">关闭</div>
            </div>
          </div>
        </div>
        <div class="machine"></div>
        <div class="col">
          <div class="item">
            <div class="title">震动装置</div>
            <div class="status">
              <div class="close"></div>
              <div class="value">关闭</div>
            </div>
          </div>
          <div class="item">
            <div class="title">补光灯</div>
            <div class="status">
              <div class="close"></div>
              <div class="value">关闭</div>
            </div>
          </div>
          <div class="item">
            <div class="title">杀虫控制</div>
            <div class="status">
              <div class="open">
                <svg
                  width="26"
                  height="26"
                  viewBox="0 0 26 26"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g filter="url(#filter0_d_209_14064)">
                    <circle cx="13" cy="13" r="3" fill="#00FF66" />
                  </g>
                  <defs>
                    <filter
                      id="filter0_d_209_14064"
                      x="0"
                      y="0"
                      width="26"
                      height="26"
                      filterUnits="userSpaceOnUse"
                      color-interpolation-filters="sRGB"
                    >
                      <feFlood flood-opacity="0" result="BackgroundImageFix" />
                      <feColorMatrix
                        in="SourceAlpha"
                        type="matrix"
                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                        result="hardAlpha"
                      />
                      <feMorphology
                        radius="2"
                        operator="dilate"
                        in="SourceAlpha"
                        result="effect1_dropShadow_209_14064"
                      />
                      <feOffset />
                      <feGaussianBlur stdDeviation="4" />
                      <feComposite in2="hardAlpha" operator="out" />
                      <feColorMatrix
                        type="matrix"
                        values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.4 0 0 0 0.5 0"
                      />
                      <feBlend
                        mode="normal"
                        in2="BackgroundImageFix"
                        result="effect1_dropShadow_209_14064"
                      />
                      <feBlend
                        mode="normal"
                        in="SourceGraphic"
                        in2="effect1_dropShadow_209_14064"
                        result="shape"
                      />
                    </filter>
                  </defs>
                </svg>
              </div>
              <div class="value">开启</div>
            </div>
          </div>
          <div class="item">
            <div class="title">烘干控制</div>
            <div class="status">
              <div class="open">
                <svg
                  width="26"
                  height="26"
                  viewBox="0 0 26 26"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g filter="url(#filter0_d_209_14064)">
                    <circle cx="13" cy="13" r="3" fill="#00FF66" />
                  </g>
                  <defs>
                    <filter
                      id="filter0_d_209_14064"
                      x="0"
                      y="0"
                      width="26"
                      height="26"
                      filterUnits="userSpaceOnUse"
                      color-interpolation-filters="sRGB"
                    >
                      <feFlood flood-opacity="0" result="BackgroundImageFix" />
                      <feColorMatrix
                        in="SourceAlpha"
                        type="matrix"
                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                        result="hardAlpha"
                      />
                      <feMorphology
                        radius="2"
                        operator="dilate"
                        in="SourceAlpha"
                        result="effect1_dropShadow_209_14064"
                      />
                      <feOffset />
                      <feGaussianBlur stdDeviation="4" />
                      <feComposite in2="hardAlpha" operator="out" />
                      <feColorMatrix
                        type="matrix"
                        values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.4 0 0 0 0.5 0"
                      />
                      <feBlend
                        mode="normal"
                        in2="BackgroundImageFix"
                        result="effect1_dropShadow_209_14064"
                      />
                      <feBlend
                        mode="normal"
                        in="SourceGraphic"
                        in2="effect1_dropShadow_209_14064"
                        result="shape"
                      />
                    </filter>
                  </defs>
                </svg>
              </div>
              <div class="value">开启</div>
            </div>
          </div>
          <div class="item">
            <div class="title">摄像头</div>
            <div class="status">
              <div class="open">
                <svg
                  width="26"
                  height="26"
                  viewBox="0 0 26 26"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g filter="url(#filter0_d_209_14064)">
                    <circle cx="13" cy="13" r="3" fill="#00FF66" />
                  </g>
                  <defs>
                    <filter
                      id="filter0_d_209_14064"
                      x="0"
                      y="0"
                      width="26"
                      height="26"
                      filterUnits="userSpaceOnUse"
                      color-interpolation-filters="sRGB"
                    >
                      <feFlood flood-opacity="0" result="BackgroundImageFix" />
                      <feColorMatrix
                        in="SourceAlpha"
                        type="matrix"
                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                        result="hardAlpha"
                      />
                      <feMorphology
                        radius="2"
                        operator="dilate"
                        in="SourceAlpha"
                        result="effect1_dropShadow_209_14064"
                      />
                      <feOffset />
                      <feGaussianBlur stdDeviation="4" />
                      <feComposite in2="hardAlpha" operator="out" />
                      <feColorMatrix
                        type="matrix"
                        values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.4 0 0 0 0.5 0"
                      />
                      <feBlend
                        mode="normal"
                        in2="BackgroundImageFix"
                        result="effect1_dropShadow_209_14064"
                      />
                      <feBlend
                        mode="normal"
                        in="SourceGraphic"
                        in2="effect1_dropShadow_209_14064"
                        result="shape"
                      />
                    </filter>
                  </defs>
                </svg>
              </div>
              <div class="value">开启</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <vue3ScrollSeamless
        :classOptions="{
          limitMoveNum: 1,
          direction: 3,
          step: 0.5,
        }"
        :dataList="[1, 2]"
        style="overflow: hidden"
      >
        <div style="display: flex">
          <div class="list">
            <img
              class="img"
              src="http://images.auto.0531yun.cn/wormImages/1127240022A800688-bf2ab47f6368455c844d79aaa4596677.jpg"
              alt=""
            />
            <div>
              <div class="item">
                <div class="title">设备名称:</div>
                <div class="value">1127240022</div>
              </div>
              <div class="item">
                <div class="title">采集时间:</div>
                <div class="value">2025-10-30 22:09:27</div>
              </div>
              <div class="item">
                <div class="title">害虫数量:</div>
                <div class="value">0</div>
              </div>
            </div>
          </div>
          <div class="list">
            <img
              class="img"
              src="http://images.auto.0531yun.cn/wormImages/1127240022A800688-bf2ab47f6368455c844d79aaa4596677.jpg"
              alt=""
            />
            <div>
              <div class="item">
                <div class="title">设备名称:</div>
                <div class="value">1127240022</div>
              </div>
              <div class="item">
                <div class="title">采集时间:</div>
                <div class="value">2025-10-30 21:09:27</div>
              </div>
              <div class="item">
                <div class="title">害虫数量:</div>
                <div class="value">0</div>
              </div>
            </div>
          </div>
        </div>
      </vue3ScrollSeamless>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.index-3 {
  .list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 20px;
    .item {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .title {
      font-family: PingFang SC;
      font-weight: 400;
      font-style: Regular;
      font-size: 12px;
      color: #00e0ff;
    }
    .value {
      width: 100px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-family: PingFang SC;
      font-weight: 400;
      font-style: Regular;
      font-size: 12px;
      color: #fff;
    }
  }
  .left {
    width: 400px;
    height: 300px;
    background: url('@/assets/images/plant/right-top/bottom.png') no-repeat center center;
    background-size: 100% 100%;
  }
  .right {
    margin-left: 16px;
    width: 450px;
    height: 300px;
    background: url('@/assets/images/plant/right-top/kuang.png') no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    gap: 3px;
    .col {
      width: 108px;
      height: 100%;
      .item {
        margin: 10px 0;
        .title {
          font-family: PingFang SC;
          font-weight: 500;
          font-style: Medium;
          font-size: 12px;
          text-align: center;
          text-transform: uppercase;
          margin-top: 5px;
        }
        .status {
          display: flex;
          align-items: center;
          .value {
            margin-top: 3px;
            font-family: PingFang SC;
            font-weight: 500;
            font-style: Medium;
            font-size: 10px;
          }
          .open {
            width: 21px;
            height: 21px;
            margin-left: -8px;
          }
          .close {
            width: 6px;
            height: 6px;
            background: #006da7;
            border-radius: 50%;
            margin-right: 5px;
          }
        }
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 108px;
        height: 48px;
        background: url('@/assets/images/plant/right-top/mini.png') no-repeat center center;
        background-size: 100% 100%;
      }
    }
    .machine {
      width: 137px;
      height: 280px;
      background: url('@/assets/images/plant/right-top/machine.png') no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .bottom {
    padding: 18.5px 20px;
    margin-top: 20px;
    width: 100%;
    height: 100px;
    background: url('@/assets/images/plant/right-top/index-3.png') no-repeat center center;
    background-size: 100% 100%;
    .img {
      width: 96px;
      height: 64px;
      border-radius: 4px;
      object-fit: scale-down;
    }
  }
}
</style>
